import { memo, useState} from 'react'
import type { ChangeEvent, FC, ReactNode } from 'react'
import { useNavigate } from 'react-router'
import { Avatar, Badge, Dropdown, Space, Drawer, Popover, Tabs, Button } from '@arco-design/web-react'
import { _PAGE_ } from '@/consts/system.ts'
import { Input } from '@/components/web-react'
import UserInfo from './user-info'
import Profile from './profile'
import { IconDown, IconSettings } from '@arco-design/web-react/icon'
import loginAuth from '@/hoc/login_auth'
import { RIconMessage, RIconMusicRecognition, RIconSearch, RIconSet, RIconTheme } from '@/components/web-react/icon'

interface IProps {
  children?: ReactNode
}

const Header: FC<IProps> = () => {
  const navigate = useNavigate()
  return (
    <div
      className={
        'w-full h-full px-4 bg-white border-b border-t border-solid border-inherit flex items-center flex-nowrap'
      }
    >
      {/* LOGO墙 */}
      <div
        onClick={() => navigate(`/loading/${_PAGE_.ruim.label}`)}
        className={
          'flex items-center ml-[20px] mr-6 cursor-pointer select-none'
        }
      >
        <img
          className={'hover:scale-90 transition duration-200'}
          src={'./logo.png'}
          alt={'...'}
        />
      </div>
      {/* 搜索 */}
      <div className={'flex-1 mx-2 px-2 flex'}>
        <HandleHeaderSearch></HandleHeaderSearch>
      </div>
      {/* 信息设置 */}
      <div className={'mx-4 select-none'}>
        <HandleHeaderUserSetting></HandleHeaderUserSetting>
      </div>
    </div>
  )
}

export default memo(Header)

function HandleHeaderSearch() {
  const navigate = useNavigate()
  const [search, setSearch] = useState<string>('')

  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    // console.log('输入值改变:', event.target.value)
    setSearch(event.target.value)
  }
  /**
   * 搜索框聚焦且无值
   */
  const dropDef: ReactNode = (
    <div
      className={
        'min-w-[400px] max-w=[600px] min-h-[200px] bg-primary-600/60 backdrop-blur-md rounded box-border p-2 text-white grid grid-cols-1 grid-rows-2 shadow'
      }
    >
      {search && (
        <div>
          <p className={'flex justify-between'}>
            <span>搜索历史</span>
            <span className={'text-base-plate cursor-pointer'}>清空</span>
          </p>
        </div>
      )}
      <div>
        <p>热门搜索</p>
      </div>
    </div>
  )
  /**
   * 搜索框聚焦且有值
   */
  const dropVal: ReactNode = (
    <div
      className={
        'min-w-[400px] max-w=[600px] min-h-[200px] bg-primary-600/60 backdrop-blur-lg rounded box-border p-2 text-white grid grid-cols-1 grid-rows-2'
      }
    >
      <div onClick={() => navigate('/ruom/music-search')}>
        <p>我的音乐</p>
        {search}
      </div>
      <div>
        <p>在线音乐</p>
      </div>
    </div>
  )
  return (
    <div className={'w-full flex justify-between items-center gap-4'}>
      <Dropdown trigger={'click'} droplist={search ? dropVal : dropDef}>
          <div className='w-full'>
            <Input
            value={search}
            label={<RIconSearch></RIconSearch>}
            onChange={handleInputChange}
            placeholder={'搜索'}
          ></Input>
        </div>
      </Dropdown>
      <RIconMusicRecognition
        className={'mr-4'}
        onClick={() => navigate('/ruom/music-recognition')}
        size='32px'
      />
    </div>
  )
}


function IsLoginComponent() {
  const navigate = useNavigate()
  // 从localStorage中获取用户信息
  const userInfo = JSON.parse(localStorage.getItem('token') as string)

  return (
    <div className={'flex items-center cursor-pointer gap-2'}>
      <div onClick={()=>navigate('/ruom/user-detail')} className={"hover:text-primary-600 active:text-primary-700"}>
        <Avatar size={36}>
          <img src={'./user.jpg'} alt="..." />
        </Avatar>
        <span className={"ml-2"}>{userInfo?.nickname}</span>
      </div>
      <Dropdown droplist={<UserInfo></UserInfo>} trigger='click' position="br">
        <IconDown style={{fontSize: '21px', color: '#8b96d9'}}/>
      </Dropdown>
    </div>
  )
}

function NoticeComponent() {

  return (
    <div className={'w-72 min-h-40 max-h-96'}>
      <Tabs defaultActiveTab='1' type='rounded' extra={<Button type='text' size='small'>清空</Button>}>
        <Tabs.TabPane key='1' title={`消息(${3})`}></Tabs.TabPane>
        <Tabs.TabPane key='2' title={`通知(${2})`}></Tabs.TabPane>
      </Tabs>
    </div>
  )
}

function HandleHeaderUserSetting() {
  const navigate = useNavigate()
  const [visible, setVisible] = useState(false);
  const [count, setCount] = useState<number>(12)
  const [dot, setDot] = useState<boolean>(true)
  const IsloginNode = loginAuth(IsLoginComponent)
  return (
    <div className={'flex gap-2'}>
      <div className={'mr-4 flex items-center cursor-pointer gap-4'}>
        <Popover
          blurToHide
          trigger='click'
          position='br'
          content={
            <NoticeComponent></NoticeComponent>
          }
        >
          <Badge
            dot={dot}
            count={dot ? count : 0}
            maxCount={99}
            color={'#e91e63'}
          >
            <RIconMessage></RIconMessage>
          </Badge>
        </Popover>

        <RIconTheme onClick={() => navigate('/ruom/themes')}></RIconTheme>
      </div>
      <IsloginNode></IsloginNode>
      <Space className={'ml-2'} align='center'>
        <RIconSet onClick={() => setVisible(true)}></RIconSet>
        <Drawer
          width={280}
          escToExit
          title={<span className='text-gray-700'><IconSettings /> 系统配置 </span>}
          visible={visible}
          onOk={() => {
            setVisible(false);
          }}
          onCancel={() => {
            setVisible(false);
          }}
        >
          <Profile></Profile>
        </Drawer>
      </Space>
    </div>
  )
}

